<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<div class="layuimini-container">
    <div class="layuimini-main">
        <fieldset class="layui-elem-field layui-field-title">
            <legend>成员统计</legend>
        </fieldset>

        <div class="layui-form" style="margin: 10px 10px 10px 10px">
            <form class="layui-form layui-form-pane" action="">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">选择学院</label>
                        <div class="layui-input-inline">
                            <label>
                                <select name="searchCollege">
                                    <option value="" selected="selected">--请选择--</option>
                                    <option value="1" >计算机科学与技术学院</option>
                                    <option value="2">电子信息工程学院</option>
                                    <option value="3">机械电子工程学院</option>
                                </select>
                            </label>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">年级</label>
                        <div class="layui-input-inline" >
                            <input type="text" name="searchGrade" id="searchGrade" autocomplete="off" placeholder="请选择年级" class="layui-input" readonly="readonly">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">选择专业</label>
                        <div class="layui-input-inline" >
                            <label for="searchMajor"></label><select name="searchMajor" id="searchMajor" >
                            <option value="" selected="selected">--请选择--</option>
                            <option value="162056">软件工程</option>
                            <option value="162054">计算机科学与技术</option>
                        </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">状态</label>
                        <div class="layui-input-inline" >
                            <label>
                                <select  name="searchState">
                                    <option value="" selected="selected">--请选择--</option>
                                    <option value="1" >正常</option>
                                    <option value="2">退出</option>
                                    <option value="3">毕业</option>
                                </select>
                            </label>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn" lay-submit="" lay-filter="data-search-btn1"><i class="layui-icon layui-icon-search"></i> 搜索</button>
                        <button type="reset" class="layui-btn layui-btn-primary"><i class="layui-icon layui-icon-refresh"></i>重置</button>
                    </div>
                </div>
            </form>
        </div>

        <!--图表一-->

        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">

                <div class="layui-card-body">
                    <div class="layui-row layui-col-space15">
                        <div class="layui-col-md6">
                            <div class="layui-card" style="box-shadow: 0px 0px 10px 3px gainsboro; border-radius: 20px;">
                                <div class="layui-card-header" style="font-weight: bold; font-size: 18px;">成员人数统计</div>
                                <div class="layui-card-body">
                                    <div id="pienum" style="width: 100%; height: 400px;"></div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md6">
                            <div class="layui-card" style="box-shadow: 0px 0px 10px 3px gainsboro; border-radius: 20px;">
                                <div class="layui-card-header" style="font-weight: bold; font-size: 18px;">学院情况统计</div>
                                <div class="layui-card-body">
                                    <div id="piewin" style="width: 100%; height: 400px;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-form" style="margin: 50px 10px 10px 10px">
            <form class="layui-form layui-form-pane" action="">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">专业名称</label>
                        <div class="layui-input-inline" >
                            <label for="searchMajor2"></label><select name="searchMajor2" id="searchMajor2" >
                            <option value="" selected="selected">--请选择--</option>
                            <option value="162056">软件工程</option>
                            <option value="162054">计算机科学与技术</option>
                        </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">时间范围</label>
                        <div class="layui-input-inline" style="width: 230px;">
                            <input type="text" name="daterange" id="daterange" autocomplete="off" placeholder="请选择日期范围" class="layui-input" readonly="readonly">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn" lay-submit="" lay-filter="data-search-btn2"><i class="layui-icon layui-icon-search"></i> 搜索</button>
                        <button type="reset" class="layui-btn layui-btn-primary"><i class="layui-icon layui-icon-refresh"></i>重置</button>
                    </div>
                </div>
            </form>
        </div>
        <div style="padding: 20px;">
            <div class="layui-row layui-col-space15">
                <div class="layui-card" style="border-radius: 20px; border: 2px solid buttonface; box-shadow: 0px 0px 10px 3px gainsboro;">
                    <div class="layui-card-header" style="font-weight: bold; font-size: 18px;">各专业成员人数比较</div>
                    <div class="layui-card-body">
                        <div id="histogramsearchMajor" style="width: 100%; height: 400px;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<script src="js/lay-module/echarts/echarts.js" charset="utf-8"></script>
<script src="js/lay-module/echarts/echartsTheme.js" charset="utf-8"></script>
<script src="lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="lib/jq-module/paigusu.min.js" charset="utf-8"></script>

<script>
    // 定义全局变量
    var $;
    layui.use(['form', 'layer', 'laydate'], function() {
        $ = layui.jquery;
        var form = layui.form,
            layer = layui.layer,
            laydate = layui.laydate,
            initYear;
        //日期1

        form.render();
        laydate.render({
            elem:'#searchGrade',
            type:'year',
            trigger:'click',
            ready: function(date){ // 控件在打开时触发，回调返回一个参数：初始的日期时间对象
                initYear = date.year;
            },
            change: function(value, date, endDate){ // 年月日时间被切换时都会触发。回调返回三个参数，分别代表：生成的值、日期时间对象、结束的日期时间对象
                var selectYear = date.year;
                var differ = selectYear-initYear;
                if (differ != 15 && differ != -15) {
                    if($(".layui-laydate").length){
                        $("#searchGrade").val(value);
                        $(".layui-laydate").remove();
                    }
                }
                initYear = selectYear;
            }
        })
        //日期2
        laydate.render({
            elem: '#daterange',
            type: 'month',
            range: '~'
        });

        // 监听搜索_1操作
        form.on('submit(data-search-btn1)', function (data) {
            layer.alert(JSON.stringify(data.field), {
                title: '最终的提交信息'
            })
            return false;
        });
        // 监听搜索_2操作
        form.on('submit(data-search-btn2)', function (data) {
            layer.alert(JSON.stringify(data.field), {
                title: '最终的提交信息'
            })
            return false;
        });




        /**
         * 图表统计
         */
        var echarts_pienum = echarts.init(document.getElementById('pienum'), 'walden');
        var echarts_piewin = echarts.init(document.getElementById('piewin'), 'walden');
        var echarts_histogram = echarts.init(document.getElementById('histogramsearchMajor'), 'walden');

        // 成员人数统计饼图
        var pienum = {
            title : {
                text: '根据各年级统计成员人数饼图',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['大一','大二','大三','大四','毕业']
            },
            series : [
                {
                    name: '成员来源',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:[
                        {value:335, name:'大一'},
                        {value:560, name:'大二'},
                        {value:800, name:'大三'},
                        {value:300, name:'大四'},
                        {value:150, name:'毕业'}
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        // 各院系成员统计饼图
        var piewin = {
            title : {
                text: '根据各院系统计成员饼图',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['计算机科学与技术学院','应用科学学院','电子信息工程学院','机械工程学院','材料科学与工程学院']
            },
            series : [
                {
                    name: '成员来源',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:[
                        {value:1500, name:'计算机科学与技术学院'},
                        {value:410, name:'应用科学学院'},
                        {value:556, name:'电子信息工程学院'},
                        {value:335, name:'机械工程学院'},
                        {value:148, name:'材料科学与工程学院'}
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        var histogram = {
            legend: {},
            tooltip: {},
            toolbox : {
                show : true,
                feature : {
                    mark : {
                        show : true
                    },
                    dataView : {
                        show : true,
                        readOnly : false
                    },
                    magicType : {
                        show : true,
                        type : [ 'line', 'bar' ]
                    },
                    restore : {
                        show : true
                    },
                    saveAsImage : {
                        show : true
                    }
                }
            },
            dataset: {
                source: [
                    ['product', '2018', '2019'],
                    ['软件工程', 43.3,  93.7],
                    ['计算机科学与技术', 83.1,  55.1],
                    ['网络工程', 86.4, 82.5],
                    ['数字媒体技术', 72.4, 39.1],
                    ['物联网工程', 72.4, 39.1]
                ]
            },
            xAxis: {type: 'category'},
            yAxis: {},
            // Declare several bar series, each will be mapped
            // to a column of dataset.source by default.
            series: [
                {type: 'bar'},
                {type: 'bar'}
            ]
        };

        echarts_pienum.setOption(pienum);
        echarts_piewin.setOption(piewin);
        echarts_histogram.setOption(histogram);
        // echarts 窗口缩放自适应
        window.onresize = function() {
            echarts_pienum.resize();
            echarts_piewin.resize();
            echarts_histogram.resize();
        }

    });
</script>
